.mjGenerate {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  :global {
    .mj-generate_content {
      flex: 1;
      margin-right: 10px;
      background: var(--g-theme-menuBg);
      border-radius: 5px;
      padding: 10px;
      box-sizing: border-box;
      overflow: auto;
      .mj_content-head-info {
        color: var(--g-theme-chat-session-info-color);
        margin-bottom: 10px;
        display: flex;
        justify-content: flex-start;
        .marquessBox {
          flex: 1;
        }
        .mj_balance {
          // width: 100px;
          // margin-left: 10px;
          font-size: 14px;
          color: var(--g-theme-chat-session-info-color);
          font-weight: bold;
          text-align: center;
        }
      }

      .mj-content_head {
        width: 100%;
        .mj_head-tools {
          width: 100%;
          // height: 40px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .mj_head-tools-input {
            width: calc(100% - 80px);
            height: 100%;
            background: var(--g-theme-activeMenuBg);
            border-radius: 5px;
            overflow: hidden;
            padding-left: 15px;
            color: var(--g-theme-color);
            border: 1px solid var(--g-theme-black);
            &::placeholder {
              color: var(--g-theme-color);
            }
          }
          .mj_head-tools-btn {
            width: 70px;
            height: 40px;
            line-height: 40px;
            border-radius: 6px;
            background: #f8d849;
            color: #000;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s;
            cursor: pointer;
            text-align: center;
          }
        }

        .mj_head-settings {
          display: none;
          text-align: center;
          margin-top: 20px;
          color: var(--g-theme-color);
          @media only screen and (max-width: 600px) {
            display: block;
          }
          .label {
            font-size: 14px;
          }
          .img {
            width: 25px;
            height: 25px;
          }
        }
      }

      .mj-content_warp {
        width: 100%;
        overflow: auto;
        margin-top: 20px;
        margin-bottom: 10px;
        display: grid;
        grid-template-columns: repeat(3, minmax(0px, 1fr));
        gap: 12px;

        @media only screen and (width: 1366px) {
          grid-template-columns: repeat(2, minmax(0px, 1fr));
        }

        @media only screen and (max-width: 600px) {
          grid-template-columns: repeat(1, minmax(0px, 1fr));
        }
        .mj-generate_info {
          width: 100%;
          border-radius: 10px;
          border: 1px solid var(--g-theme-activeMenuBg);
          overflow: hidden;
          background: var(--g-theme-sessionBgColor);

          .mj-generate_info_warp {
            width: 100%;
          }

          .mj-content-bottom_tools {
            width: 100%;
            background: var(--g-theme-black);
            .mj-content-bottom_config {
              width: 100%;
              color: var(--primary);
              .mj-content-bottom_config_U {
                font-size: 12px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 5px 10px;
                box-sizing: border-box;

                .mj-item_bottom_U_label {
                  font-size: 12px;
                  width: 20%;
                  text-align: left;
                }
                .mj-item_bottom_U_btns {
                  flex: 1;
                  display: flex;
                  justify-content: space-between;

                  .mj-item_bottom_U_btns_item {
                    padding: 1px 5px;
                    box-sizing: border-box;
                    text-align: center;
                    border: 1px solid var(--g-theme-bordercolor);
                    border-radius: 2px;
                    cursor: pointer;
                    &:hover {
                      border: 1px solid var(--primary);
                      color: var(--primary);
                    }
                  }
                }
              }
            }

            .mj-content-bottom_info {
              width: 100%;
              padding: 5px 10px;
              box-sizing: border-box;
              font-size: 12px;
              color: var(--g-theme-color);
            }
          }

          .mj-content-item {
            width: 100%;
            .mj-generate_img_upscale {
              height: 100%;
            }

            .mj-content-item_tools {
              display: flex;
              padding: 10px;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 10px;

              .mj-generate-img-state {
                color: var(--primary);
                border: 1px solid var(--primary);
                border-radius: 10px;
                padding: 0 5px;
                box-sizing: border-box;
                font-size: 12px;
              }
              .mj-generate-img-failure {
                color: var(--g-theme-mj-btn);
                border: 1px solid var(--g-theme-mj-btn);
                background: var(--g-theme-menuBg);
                border-radius: 10px;
                padding: 0 5px;
                box-sizing: border-box;
                font-size: 12px;
                font-weight: bold;
              }
              .tools {
                .deleteImg {
                  cursor: pointer;
                  margin-left: 5px;
                }
              }
            }

            .mj-generate-tools_btn {
              font-size: 12px;
            }

            .mj-generate_img {
              width: 100%;
              display: flex;
              justify-content: center;
            }

            .mj-generate_img_loadingBox {
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              text-align: center;
              color: var(--g-theme-color);
              position: relative;
              .mj-generate_img_loading {
                width: 100%;
                padding-bottom: 10px;
              }
              .mj-generate_img_loading_label {
                text-align: center;
                margin-top: 30px;
              }
              .ant-progress-text {
                color: var(--g-theme-color);
              }

              .generateImgFail {
                display: block;
                width: 80%;
                margin: 0 auto;
              }
            }
          }
        }
      }

      .mj_content-nodeData-box {
        width: 40%;
        margin: 0 auto;

        .mj_content-nodeData-img {
          display: block;
          width: 100%;
        }
        .mj_content-nodeData-info {
          color: var(--g-theme-color);
          text-align: center;
        }
      }
    }

    .mj-generate_setting {
      width: 260px;
      height: 100%;
      background: var(--g-theme-menuBg);
      color: var(--g-theme-color);
      border-radius: 5px;
      transition: all 0.5s linear;
      padding: 10px;
      box-sizing: border-box;
      overflow: auto;
      .ant-collapse {
        border: none;
      }
      @media only screen and (max-width: 600px) {
        position: fixed;
        right: -999px;
      }
      .title-box {
        width: 100%;
        display: none;
        justify-content: space-between;
        align-items: center;

        box-sizing: border-box;
        margin-bottom: 20px;

        @media only screen and (max-width: 600px) {
          display: flex;
        }
      }

      .setting-img_box {
        width: 100%;
        display: flex;
        justify-content: center;
        .setting_img-item {
          flex: 1;
          border: 1px solid #454545;
          text-align: center;
          padding: 3px 0;
          margin: 0 3px;
          box-sizing: border-box;
          cursor: pointer;
          border-radius: 4px;
        }
        .setting_img-item-selected {
          border: 1px solid var(--primary);
        }
      }
    }
    .mobile_mask {
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      position: fixed;
      top: 0;
      left: 0;
      user-select: none;
    }
    .mobileSettingShow {
      right: 0;
      top: 0;
      z-index: 20;
      height: 100vh;
    }
  }
}
